<html>
<head>
<title>
</title>
<link rel="stylesheet" href="style.css">

<script src="https://maps.google.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="data/annual.js"></script>

<script>
var map;
var heatmap;
var heatmapData = [];

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(0, 0),
    zoom: 2,
    maxZoom: 20,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true,
    zoomControl: true
  });

  map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(document.getElementById('controls'));

  for (set in data) {
    heatmapData[set] = [];
    for (vals in data[set]) {
      heatmapData[set].push(new google.maps.LatLng(data[set][vals].coords[0], data[set][vals].coords[1]));
    }
  }

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData['1750'],
    dissipating: false,
    radius: 2
  });
  heatmap.setMap(map);

  document.getElementById('year-slider').addEventListener('change', setYearFromSlider, false);
}

function setYearFromSlider() {
  var value = document.getElementById('year-slider').value;
  setYear(value);
  document.getElementById('year-slider-label').textContent = value;
}

function setYear(year) {
  heatmap.setData(heatmapData[year.toString()]);
}

/* Convenience method for updating data via console. */
function setSliderYear(year) {
  document.getElementById('year-slider').value = year;
  setYearFromSlider();
}
</script>
</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
  <div id="controls" class="control">
    <label id="year-slider-label" class="slider-label" for="year-slider">1750</label>
    <span class="slider-wrap">
      <input type="range" id="year-slider" class="slider" min="1750" max="1854" value="1750" />
    </span>
  </div>
</body>
</html>
